// @ts-ignore
import {Button, Input} from 'antd';
// @ts-ignore
import { PageContainer } from '@ant-design/pro-components';
// @ts-ignore
import {Card, Image} from 'antd';
// @ts-ignore
import {React, useCallback, useEffect, useState} from 'react';
// @ts-ignore
import type { SearchProps } from 'antd/es/input/Search';
import {useParams} from "react-router";
import {history} from "@@/core/history";
import {searchBook} from "@/services/ant-design-pro/api";

const { Search } = Input;

import "./Search.less"





const SearchPage: React.FC = () => {
  const { name } = useParams()
  const [bookList, setBookList] = useState<API.BookInfo>({})

  let initValue = name
  const getBookList = async (name: string) => {
    try {
      const res = await searchBook(name);
      if (res.data) {
        setBookList(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    if(name){
      getBookList(name).then();
    }
  }, []);


  const clickForDetail = useCallback((id: number) => {
    history.push(`/book/detail/${id}`);
  }, [])

  const onSearch: SearchProps['onSearch'] = async (value) => {
    await getBookList(value).then();
  }

  return (
    <PageContainer>
      <div
        style={{
          width: "100%",
          marginBottom: "20px",
        }}
      >
        <Search
          placeholder="input search text"
          allowClear
          enterButton
          size="large"
          defaultValue={initValue}
          onSearch={onSearch}
        />
      </div>


      {bookList.data && bookList.data.length > 0 && (
        <Card className={"message"}>
          <b>搜索结果为共 {bookList.data.length} 个</b>
        </Card>
      )}

      {bookList.data && bookList.data.length < 1 &&(
        <Card className={"message"}>
          <b>搜索结果为空</b>
        </Card>
      )}

      {bookList.data &&
        bookList.data.map((book, index)=>(
          <Card
            key={index}
          >
            <Image
              src={book.picture}
              style={{
                float: "left",
                height: "200px",
              }}
            ></Image>
            <div
              style={{
                float: "right",
                width: "75%"
              }}
            >
              <div
                className={"infoBox"}
                style={{
                  float: "left"
                }}
              >
                <b>{book.name}</b> <br/>
                <text className={"sort"}>分类：{book.sort}</text>
                <p className={"score"}> 智库评分：{book.score}</p>
                <p>作者：{book.author}</p>
                <p>藏书地点：{book.location}</p>
                <p>现有余量：{book.num}</p>
              </div>

              <div
                className={"buttonBox"}
                style={{
                  float: "right",
                  marginTop: "20px"
                }}
              >
                <Button className={"checkButton"} type={"primary"} onClick={() => clickForDetail(book.id)}>查看详情</Button> <br/>
                <Button className={"checkButton"} type={"primary"} onClick={() => clickForDetail(book.id)} ghost>借阅</Button>
              </div>

            </div>


          </Card>
        ))
      }
    </PageContainer>
  );
}

export default SearchPage;
